<template>
  <div class="login-container">
    <el-row :gutter="10">
      <el-col :span="12" class="login-area">
        <div class="login-form">
          <div class="login-form-title">
            欢迎注册图书在线管理系统
          </div>
          <div class="login-form-body">
            <el-input class="form-input" type="text" v-model="registerForm.username" placeholder="请输入用户名"/>
            <el-input class="form-input" type="password" v-model="registerForm.password" placeholder="请输入你的密码"/>
            <el-input class="form-input" type="password" v-model="registerForm.rePassword" placeholder="请确认您的密码"/>
            <el-input class="form-input" type="text" v-model="registerForm.realname" placeholder="请输入您的真实姓名"/>
            <el-input class="form-input" type="text" v-model="registerForm.idMilitary" placeholder="请输入您的军人证件号"/>
            <client-only>
            <el-cascader class="form-input"
                         style="height: 45px; margin:10px 0; width: 100%;"
                         v-model="registerForm.departmentId"
                         placeholder="请选择您所在的单位"
                         :props="cascaderProps"
                         :options="departmentTreeSelectSource"
            />
            </client-only>
            <el-button class="form-input" type="warning" @click="handleRegister">注   册</el-button>
          </div>
          <div class="login-form-footer">
            <div class="tip">已有账号？<a href="/login">去登录</a></div>
          </div>
        </div>
      </el-col>
      <el-col :span="12"/>
    </el-row>
  </div>
</template>

<script setup lang="ts">

import { useApi } from "~/composeables";
import DepartmentCache from "~/store/system/departmentCache";

const api = useApi();

const cascaderProps = {checkStrictly: true, multiple: false, label: 'text'};

DepartmentCache.update();


const departmentTreeSelectSource = ref<any>(DepartmentCache.departmentTreeSelectSource);

watch(
  ()=>DepartmentCache.departmentTreeSelectSource,
  (val)=>{ departmentTreeSelectSource.value = val;}
)


const registerForm = ref({
  username: "",
  password: "",
  rePassword: "",
  realname: "",
  idMilitary: "",
  departmentId: "",
})

const handleRegister = ()=>{
  registerForm.value.departmentId = registerForm.value.departmentId[0];
  api.auth.register(registerForm)
    .then(res=>{
      if(res.success){
        ElMessageBox.alert("注册成功，现在可以登录！")
          .then(res=>{
            window.location.href="/login";
          })
      }else{
        ElMessage.error("注册失败，请检查用户名和密码！");
      }
    }).catch(err=>{
    ElMessage.error("注册失败，请检查网络连接！");
    console.error(err);
  })
}

</script>


<style scoped>
.login-container{
  width: calc(100vw);
  height: calc(100vh);
  background-image: url("/login-bg.jpg");
  background-size: cover;
}

.login-area{
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh);
}

.login-form{
  height: 520px;
  width: 320px;
  background: #CCCCCC5A;
  padding: 40px;
  border-radius: 10px;
}

.login-form-title{
  width: 100%;
  height: 45px;
  font-size: 1.5em;
  font-weight: bold;
}

.form-input{
  width: 100%;
  height: 45px;
  margin: 10px 0;
}

.form-input .el_input .el-input--suffix {
  height: 45px;
}
</style>

